<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #content {
            width: 500px;
            height: 300px;
            border: 1px solid #aaa;
        }
        
        img {
            width: 150px;
            height: 100px;
        }
    </style>
</head>

<body>
    <img src="../small.jpg" alt="我在">
    <img src="../tag.jpg" alt="人民广场">
    <img src="../element.jpg" alt="吃着炸鸡">
    <div class="content"></div>
    <div class="des">
        <h3>图片的描述</h3>
        <p id="text"></p>
    </div>
    <script>
        // 应用放置目标的事件
        // dragenter只要有元素拖动到放置目标上，就会触发该事件
        // dragover:触发dragenter事件后，随即会触发deagover事件，只要放置目标的范围内移动就会触发该事件
        // dragleave:元素被拖出放置目标·元素中，dragover不会被触发该事件，而不是dragleave事件
        // drop:元素被放置到目标元素中，就会触发该事件，而不是dragleave事件
        var imgs = document.getElementsByTagName("img");
        var contesnt = document.getElementById("content");
        var p = document.getElementById("text");
        var a;
        for (var i = 0; i < img.length; i++) {
            imgs[i].ondragenter = function(ev) {
                a = ev.target;
                p.innerHTML = this.alt;
            }
        }
        // 默认情况下，数据、元素不能在其他元素中被拖放。对于drop我们同必须要防止元素的默认处理
        content.ondragenter = function(ev) {
            ev.preventFault();
        }
        content.ondrop = function() {
            content.appendChild(a);
        }
    </script>

</body>

</html>